<p>

    <b> <i>x</i> <sup>2</sup>=9</b>
<hr>
<del>水</del>的
<ins>分子式</ins>是：
<br>
&nbsp;H<sub>2</sub>O

</p>


<ol start="2" type="I">
    <li>第一条
        <ul type="square">
            <li>1.1节
        </ul>
</ol>
<hr>
<dl>
    <dt>HTML</dt>
    <dd>
        Hypertext Markup Language, a standardized system for tagging text files.
    </dd>
</dl>


图片超链接效果：
<a href="http://www.baidu.com" target="_blank">
    <img src="../imgs/logo.png" width="150" height="70" alt="百度"/>
</a>


<空1  空2="1">
        <!-- 表格内容 -->
        
<空3>
                
    <空4>
                        
        <td>张三</td>
                        
        <td>90</td>
                        
        <td>100</td>
                    
    </空4>
            
</空3>

        <!-- 表格head -->
        
<空5>
                
    <空6>姓名</空6>
                
    <td>年级</td>
                
    <td>
        <空7>分数</空7>
    </td>
            
</空5>

     <!-- 表格foot -->
        
<空8>
                
    <td>第1列末尾</td>
                
    <td>第2列末尾</td>
                
    <td>第3列末尾</td>
            
</空8>

        
<空9>
                
    <空10>成绩一览表</空10>
            
</空9>
</空1>

<table border="1">
    <!-- 表格内容 -->
    <tbody>
    <tr>
        <td>张三</td>
        <td>90</td>
        <td>100</td>
    </tr>
    </tbody>
    <!-- 表格head -->
    <thead>
    <tr>
        <th>姓名</th>
        <td>年级</td>
        <td>
            <mark>分数</mark>
        </td>
    </tr>
    </thead>
    <!-- 表格foot -->
    <tfoot>
    <td>第1列末尾</td>
    <td>第2列末尾</td>
    <td>第3列末尾</td>

    </tfoot>

    <caption>
        <i>成绩一览表</i>
    </caption>
</table>

<!DOCTYPE html>
<html lang="en">
<head>

    <!-- 使用H5语法设置编码方式 -->
    <meta charset="UTF-8">
    <!-- 设置网页标题 -->
    <title>CSS引入</title>

    <!-- 外部方式引入CSS，
        地址为和网页同级目录下的css文件夹，css文件名为myCss.css -->
    <link rel="stylesheet" href="css/myCss.css">

    <style>
        p {
            font-size: 20px !important;
        }
    </style>
</head>
<body>
<!-- 文字显示大小为20px -->
<p style="font-size: 50px;">引入CSS</p>
</body>

</html>


<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        /* 通过id选择器为div1设置文本颜色#000000 */
        div1 {
            color: #000000;
        }

        /* 通过类选择器为div2和div3添加背景颜色coral */
        .red {

            background-color: coral;

        }

        /* 通过标签选择器为p标签文本设置大小20px */

        p {

            font-size: 20px;

        }

        /* 为设置有alt属性的图像元素设置边框效果 */

        img[alt] {

            border-width: 2px;

            border-style: solid;

        }

    </style>

</head>

<body>
<!-- 文字显示大小为20px -->
<div id="div1">div1</div>
<div class="red">div2</div>
<div class="red">div3</div>
<p>段落1</p>
<p>段落2</p>
<p>段落3</p>
<img src="image/balloon.jpg" alt="balloon"/>
<img src="image/balloon.jpg"/>
</body>

</html>


正确答案：
(1)
width
(2)
height
(3)
background-image
(4)
url
(5)
../imgs/logo.png
(6)
background-repeat
(7)repeat-x
(8)
background-attachment
(9)
fixed
(10)
background-position


<!DOCTYPE html>
<html lang="en">

<head>
        
    <style>
                div  {
                   
               __________:  antiquewhite;
                     
             width:  200px;
                     
             height:  200px;
                     
             __________:  __________  __________  __________  __________;
                     
              __________:   __________  __________;
                     
              __________:  red;
                     
              __________:  2px;
                     
              __________:  dotted;
                     
             __________: __________;
               /*设置盒子模型 */          
             __________:  pre-wrap;
                   
        }

            </style>
</head>

<body>
    
<div>
             望天门山
             唐】李白
               
          天门中断楚江开，
          碧水东流至此回。
          两岸青山相对出，
          孤帆一片日边来。
        
</div>
</body>

</html>

(1) background-color 
(2) padding 
(3) 5px 
(4) 6px 
(5) 7px 
(6) 8px 
(7) margin 
(8) 5px 
(9) 8px 
(10) border-color 
(11) border-width 
(12) border-style 
(13) box-sizing 
(14) content-box 
(15) white-space


<!DOCTYPE html>
<html lang="en">

<head>
        
    <style>
                p  {
                   
                ___________:  2___________;
                     
              width:  200px;
                     
              padding:  10px;
              
                       
            font-size:  30px;
                     
             ___________:  italic;
                 
                 ___________:   "微软雅黑 Light"        
        }

                div  {
                     
             ___________:  right;
                   
               ___________:  5px;
                     
              text-decoration: ___________;
                     
              ___________:  uppercase;
                   
        }

                ___________ {
                     
             ___________:  900;
                   
        }

            </style>
</head>

<body>
    <p>
            这是一个用于测试首行缩进效果的段落元素。当前缩进了两个字符的距离。文字斜体显示，字体微软雅黑。
        </p>
    
<div>
            文字右对齐，文字间距扩大为<span>5px</span>。This words transform to uppercase.
        
</div>
</body>

</html>

(1) text-indent 
(2) em 
(3) font-style 
(4) font-family 
(5) text-align 
(6) letter-spacing 
(7) overline 
(8) text-transform 
(9) span 
(10) font-weight 


<!DOCTYPE html>
<html lang="en">

<head>
        
    <style>
                table  {
                     
              _____________:  separate;
                     
              _____________:  fixed;
                     
              _____________:  90%;
                     
              empty-cells:  _____________;
                     
              word-break:    _____________;
                     
               _____________:  center;
                   
        }

                table   _____________ {
                     
              _____________:  bottom;
                   
        }

                table  _____________:nth-child(_____________) {
                     
              background-color:   #B6B6B6;
                   
        }

            </style>
</head>

<body>
    
<table
 border="1">
        
<caption>
                季度统计表
            
</caption>
        
<tr>
                
    <td>年份</td>
                
    <td>第一季度</td>
                
    <td>第二季度</td>
                
    <td>第三季度</td>
            
</tr>
        
<tr>
                
    <td>2014</td>
                
    <td>100</td>
                
    <td>200</td>
                
    <td>30000000000000000</td>
            
</tr>
        
<tr>
                
    <td>2015</td>
                
    <td>150</td>
                
    <td>250</td>
                
    <td>350</td>
            
</tr>
        
<tr>
                
    <td>2016</td>
                
    <td>200</td>
                
    <td>300</td>
                
    <td></td>
            
</tr>
    </table>
</body>

</html>
(1) border-collapse
(2) table-layout 
(3) width 
(4) hide 
(5) break-all 
(6) text-align 
(7) caption 
(8) caption-side 
(9) tr 
(10) 2n


网页内容如下：
<head>
        
    <meta
     charset="UTF-8">
        
    <meta
     name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    <link
     rel="stylesheet"   ______="./homePage.css"> 

</head>

<body>
    
<div
 id="container">
        
<div
 id="title">
            <p>学生成绩管理系统</p>
            <img  ______="./img/portrait.jpeg" alt="头像">
        </div>
        
<div
 id="wrapper">
            
<div
 id="slide">slide</div>
            
<div
 id="content">content</div>
        </div>
    </div>
</body>

CSS文件部分代码内容如下：
_______  "utf-8"; 
html ,body {
    __________: 100%;  
    margin: 0px;
    font-size: 18px;
}
#title {
    background-color: aqua;
    width: 100%;
    height: 80px;
    __________: hidden;   
    position: __________;    /* 不随滚动条移动 */
    top: _________;        
    z-index: 1000;
}
#title img{
    height: 40px;
    width: 40px;
    __________: 50%;
    position: absolute;
    top: 20px;
    right: 20px;
}
#content {
    height: 100%;
    background-color: cornflowerblue;
    width:_________(100% - 120px);   
    position: ____________;
    left: 120px;
}
(1) href
(2) src
(3) @charset
(4) height
(5) overflow
(6) fixed
(7) 0px
(8) border-radius
(9)  calc
(10) absolute;relative


HTML文件部分代码如下所示：
<!DOCTYPE html>
<html lang="en">
<head>
        
    <meta
     charset="UTF-8">
        <title>表格案例</title>
        
    <link
     rel="stylesheet" href="./tabledemo.css">
</head>
<body>
    
<div
 id="container">
        <!-- title -->
        
<div
 id="title-div">
<span>Tables&nbsp;&nbsp;&nbsp;|</span>
            <i class="bi bi-house-door"></i>
      <span>Settings</span>
        </div>
        <!-- 表格部分 -->
  
<div
 id="table-wrapper-div">
            
<div>DataTable Example</div>
            
<div>
                    
    <table
     id="data-table" border="0">
                      <!-- 表格内容省略 -->
                    </table>
                
</div>
        </div>
    </div>
</body>
</html>

CSS部分代码如下所示：
#title-div{
    width: 95%;
    height: max-content;
    _________: auto;
    margin-right: ___________;
    padding-top: 20px;
}

#title-div span:__________{  /*按照类型查找*/
    color:#5f8b9d;
    font-size: 20px;
    font-weight: 500;
}

#title-div i{
    margin-left: 5px;
    __________ : #449dfd;  
}

#title-div span:__________{   /*按照类型查找*/
    color:#FFFFFF;
    font-size: 20px;
    font-weight: 500;
    background-color: #007bff;
    float: right;
    padding: 8px;
    border-radius: 5px;
    position: ___________; 
    top: -8px;
    user-select: ___________;   /*用户不可选中文本内容*/
}

/* 表格内容部分 */
#data-table{
    width: 95%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 20px;
    border-collapse: __________;
    color: #6d757b;
    font-size: 18px;
    table-layout: _____________;    /*不随内容变换宽度*/
    word-break: break-all;   
}

#data-table tbody tr:nth-child(__________){  /*奇偶行变色*/
    background-color: #f2f2f2;
}
正确答案：
(1)   margin-left
(2) auto
(3)
first-of-type;nth-of-type(1)

(4) color
(5) nth-of-type(2)
(6) relative
(7) none
(8) collapse
(9) fixed
(10) 2n-1;2n


1. (填空题, 10分)
程序阅读题
chapter04-var定义变量
请阅读以下变量定义代码，按照要求回答问题
代码行后的注释为代码行标识
 
<script>
    console.log(b); //A

    console.log(a); //B  
    var a = 10;
    console.log(a); //C  

    fun();

    function fun() {
        console.log(a); //D 
        var a = 200;
        console.log(a); //E 

        var c = 500;
        var c = 600;   //F  
        console.log(c); //G  
    }

    console.log(c); //H  
    {
        var a = 500;
    }
    console.log(a); //I 

    alert(typeof (d)); //J

    var 1
    e = 10;  //K 
</script>

上面代码中，出错的行有_____, _____, _____;
B的输出是_____, C的输出是_____, D的输出是_____,
E的输出是_____, G的输出是_____,  I的输出是_____。
J弹出的结果是_____。
正确答案：
(1) A;a
(2) H;h
(3) K;k
(4) undefined
(5) 10
(6) undefined
(7) 200
(8) 600
(9) 500
(10) undefined

2. (填空题, 10分)
程序阅读题
chapter04-let和const定义变量
请阅读以下变量定义代码，按照要求回答问题
代码行后的注释为代码行标识
 
<script>
    console.log(a);  // A 
    let a = 10;
    console.log(a);  // B  

    fun();

    function fun() {
        console.log(a);  // C  
        let a = 20;
        console.log(a);  // D  
        let a = 30；  // E 

        let b = 100;
    }

    console.log(a);  // F  
    console.log(b);  // G  

    {
        let c = 50;

        const d;   // H  
        const e = 100;
        e = 200;   // I  

    }
    console.log(c);  // J  
</script>

上面代码中，出错的行有_____, _____, _____, _____, _____, _____, _____;
B的输出是_____, D的输出是_____, F的输出是_____,
正确答案：
(1) A;a
(2) C;c
(3) E;e
(4) G;g
(5) H;h
(6) I;i
(7) J;j
(8) 10
(9) 20
(10) 10
3. (填空题, 10分)
编程题
chapter04-字符串
请阅读以下代码，按照要求补全代码或给出代码输出
代码行后的注释为代码行标识

<script>
    var msg = "D:/前端开发/JavaScript/Demo.html";

    //截取网页名称(包含扩展名)
    var start = msg._______("/");
    var end = msg.______;
    var docName = msg.______(_______, ________);

    //获取文件扩展名
    var extName = msg._______(".")[1];

    var num1 = "123string";
    console.log(Number(num1)); //A 
    console.log(parseInt(num1)); //B

    var num2 = "s123tring";
    console.log(Number(num2)); //C
    console.log(parseInt(num2)); //D
</script>

A的输出为_________, B的输出为_________, C的输出为_________, D的输出为_________。
正确答案：
(1) lastIndexOf
(2) length
(3) substring
(4) start + 1
(5) end
(6) split
(7) NaN
(8) 123
(9) NaN
(10) NaN

1. (填空题, 10分)
程序阅读题
chapter04-Number和bool
请阅读以下代码，给出各行的输出
代码行后的注释为代码行标识

    
<script>
    var x2 = 0xAF;
    console.log(x2); //A  

    var x3 = Math.floor((0.3 - 0.2) * 100);
    console.log(x3);//B

    var x4 = 2e9000;
    console.log(x4);//C

    var x5 = -2e9000;
    console.log(x5);//D

    var result = x4 + x5;
    console.log(result);//E

    console.log(!"hello");//F

    var x7 = Boolean(999);
    console.log(x7);//G

    var x8 = Boolean(0);
    console.log(x8);//H

    var x9 = Boolean(null);
    console.log(x9);//I

    var x10 = Boolean(undefined);
    console.log(+x10);//J
</script>

A的输出是_____, B的输出是_____, C的输出是_____,
D的输出是_____, E的输出是_____, F的输出是_____,
G的输出是_____, H的输出是_____, I的输出是_____,
J的输出是_____。
正确答案：
(1) 175
(2) 9
(3) Infinity
(4) -Infinity
(5) NaN
(6) false
(7) true
(8) false
(9) false
(10) 0
2. (填空题, 10分)
编程题
chapter04-函数
定义一个时间格式化函数，返回格式化后的时间。
格式化化后的格式为： 2023-01-01 08:00:00

<script>
    var now = new _______;
    let forDate = _______;

    _______
    formatDate(date)
    {

        const year = date._______;
        const month = date._______;
        const day = date._______;
        const hour = date._______;
        const minute = date._______;
        const second = date._______;

        var dateString = year + "-" + month + "-" + day +
            " " + hour + ":" + minute + ":" + second;
        return _______;
    }
</script>
正确答案：
(1) Date()
(2) formatDate(now)
(3) function
(4) getFullYear()
(5) getMonth()+1
(6) getDate()
(7) getHours()
(8) getMinutes()
(9) getSeconds()
(10) dateString
3. (填空题, 10分)
程序片段题
chapter04-函数
通过函数闭包实现倒计时功能，倒计时时长为90s。10秒之后停止倒计时。

<script>
    let countdown = (_________
    {
        let startTime = 90;

        function minus() {
            console.log(_________);
        }

        return __________;
    }
    )
    __________;

    _________ = _________(function () {
        ________;
    }, __________);

    __________(function () {
        ___________(interval)
    }, 10 * 1000);

</script>
正确答案：
(1) function()
(2) --startTime
(3) minus
(4) ()
(5) interval
(6) setInterval
(7) countdown()
(8) 1*1000;1000
(9) setTimeout
(10) clearInterval
1. (填空题, 15分)
程序片段题 
chapter04-DOM节点
在body标签中添加一个div，宽为200px,高为100px,背景颜色为#B6B6B6。
在div中首先添加一个p标签，内部标签为"<a>新创建的段落</a>"，文本居中显示，字体大小为20px。
在p标签之前插入一个span标签，内部文本为"新创建的文本",文本为红色。
    -->
    
<script>
    let div = document.___________;
    div.style._________ = "200px";
    div.style._________ = "100px";
    div.style._________ = "#B6B6B6";

    let body = document._________("body")
    _________;
    body._________;

    let p = document.____________;
    p.____________ = "<a>新创建的段落</a>";
    p.style.___________ = "center";
    p.style.__________ = "20px";
    div.appendChild(p);

    let span = document._____________;
    span._____________ = "新创建的文本";
    span._____________("style", "color:red");
    div._____________(span, p);

</script>
正确答案：
(1) createElement("div")
(2) width
(3) height
(4) backgroundColor
(5) getElementsByTagName
(6) [0]
(7) appendChild(div)
(8) createElement("p")
(9) innerHTML
(10) textAlign
(11) fontSize
(12) createElement("span")
(13) innerText
(14) setAttribute
(15) insertBefore
2. (填空题, 10分)
程序片段题
chapter04-DOM属性和事件
根据代码及注释完成填空
    
<div id="div1">
        <p class="red">第一个p标签</p>
        <p class="red">第二个p标签</p>
        <span>第一个span标签</span>
        <span>第二个span标签</span>
        <span>第三个span标签</span>
    </div>
    
<div id="div2">
        <img src="image/lily.jpg" alt="无法加载图片" id="lily" class="flower" abc="aa" />
        <p></p>
    </div>

    
<script>
    let div1 = document.________("div1");  //获取div1对象
    let div1Text = div1.__________;  // 获取div1中所有文本

    let pArr = document.___________("red"); //获取class为red的对象
    for (i = 0; i < pArr.length; i++) {
        pArr[i].______.color = "red"; // 文本设置为红色
    }

    div2P = document._________("_______ p"); //获取div2中的p标签  
    div2P.innerText = "点击替换文字";
    div2P._________ = function () {    // 设置点击事件
        div2P.innerText = div1Text;
    }

    img = div2P._____________//获取img对象
    img.alt = img.____________; //获得属性abc的值

    console.log(div2P.parentNode.childNodes.length);//输出结果为______
</script>
正确答案：
(1)
getElementById

(2) innerText
(3) getElementsByClassName
(4) style
(5) querySelector
(6) querySelector
(7) onclick
(8) previousElementSibling
(9) getAttribute("abc")
(10) 5


<style>
            input  {
                 
          margin-top:  10px;
                 
          display:  _________;
               
    }

            input[type="_________"] {
                 
          display:  _________;
               
    }

        </style>


    
<form  _________="POST"  _________="/Server/login"   _________="application/x-www-form-urlencoded">

        <input type="_________"   name="userName" _________="必填，请输入用户名"  _________>

        <input type="_________"   name="password" placeholder="_________">

        <input type="_________"   value="1" _________>记住密码

        <input type="_________"   _________="登录">

    </form>

正确答案：
(1)
block

(2)
checkbox

(3)
inline-block

(4)
method

(5)
action

(6)
enctype

(7)
text

(8)
placeholder

(9)
required

(10)
password

(11)
请输入密码

(12)
checkbox

(13)
checked

(14)
submit

(15)
value

<form method="post" action="URL">
        
<fieldset>
                
    <legend>
                        新增输入类型range的简单应用
                    
    </legend>
                <label>音量大小：
                    <input  _______="range" name="range" id="range"   _______="0"   _______="100"   _______="2"   _______="10"   _______="change()" />
                </label><span id="volume">10</span>
            
</fieldset>
    </form>

    
<script>
    //当用户拖动滑动条时触发onchange事件调用此函数
    function change() {
        //获取滑动条对象
        var range = document.getElementById("range");
        //获取span对象
        var text = document.getElementById("volume");
        text.innerHTML = range._______;

        if (ext.innerHTML > 80) {

            let val = _______("音量过大,请调整:");

            _______(function () {
                range.value = val;
                text.innerHTML = val;
            }, _______);

        }
    }
</script>
正确答案：
(1)
type

(2)
min

(3)
max

(4)
step

(5)
value


(6)
onchange

(7)
value

(8)
prompt

(9)
setTimeout

(10)
2000；2*1000


3. (填空题, 10分)
编程题
chapter05-Dom表单
请结合Dom和表单相关内容，基于注释编写代码。
所有代码需要按照H5的要求编写。
其中网页部分代码如下所示：

<!-- 表单上传文件 -->
<form method="POST" action="/WebPageServer/register" enctype="_________">
                <label>
                        用户名：
                        <input type="text" name="userName" placeholder="必填">
                    </label>

                <label>
                        密码：
                        <input type="password" name="password" placeholder="必填">
                    </label>

                <label>
                        再次输入密码：
                        <input type="password" name="password2" placeholder="必填">
                    </label>

                <label id="img-label">头像：
                     <!-- 监听文件选择事件 -->
                    <input name="userImg" type="file"  _________="selectFile(event)">
                    <input type="text" placeholder="上传图片">
                </label>

                
<button onclick="ajaxSubmit(event)">注册</button>
</form>

其中JS部分代码如下所示：
function submit(event) {
    event._________;  //阻止默认行为

    let form = event.target._________ ; //获取表单对象

    //通过属性选择器（基于name属性） 分别获取用户名、密码、密码2、文件
    var userName = document.querySelector("input[name='userName']").value;
    var password = document.querySelector("input[name='password']").value;
    var password2 = document.querySelector("input[name='password2']").value;
    var file = document.querySelector("input[name='userImg']")._________ ; //获取文件

    let res = check(userName, password, password2)

    if (res) {
        form._________;
    } else {
        alert("请检查信息")
    }

}

//检查用户名长度是否小于等于10,
//检查密码1和密码2是否相等
// 符合要求返回true,否则反回false
function check(userName, password, password2) {
    if (userName._________<= 10) {
        return false;
    }

    if (password == password2) {
        return false;
    }

    return true;
}

function selectFile(event) {
    let file = event.target._________;
    event.target._________.value = _________;
}

正确答案：
(1) multipart/form-data
(2) onchange
(3) preventDefault()
(4) parentNode
(5) files[0]
(6) submit()
(7) length
(8) value
(9) nextElementSibling
(10) file


4. (填空题, 10分)
程序片段题
chapter06-Ajax发送请求
请结合Ajax相关内容，基于注释编写代码。
所有代码需要按照H5的要求编写。
    
<script>
    url = "/WebPageServer/login";
    var xmlhttp;

    if (window.XMLHttpRequest) {
        //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
        xmlhttp = new_________();
    } else {
        // IE6, IE5 浏览器执行代码
        xmlhttp = new _________("Microsoft.XMLHTTP");
    }

    xmlhttp._________ = function () {
        onResponse();
    }

    // POST提交数据
    xmlhttp.open(_________, _________, true);

    xmlhttp._________('content-type', 'application/x-www-form-urlencoded');
    xmlhttp.________("userName=123");

    function onResponse() {
        var res = null;
        if (xmlhttp._________ == 4) { // XMLHttpRequest的就绪状态码，对象读取响应结束
            if (xmlhttp._________ == 200) { // http的状态码，服务器响应正常
                res = xmlhttp.responseText;
            } else {

            }
        }
        //转成JSON对象
        var jsonObj = JSON._________(res);

    }
</script>
正确答案：
(1) XMLHttpRequest
(2) ActiveXObject
(3) onreadystatechange
(4) "POST";"post"
(5) url
(6) setRequestHeader
(7) send
(8) readyState
(9) status
(10) parse

